<template>
	<view class="send">
		<view class="head">
			<view>个人码</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>
     
		<view class="info-form">
			<form @submit="formSubmit" v-if="[0, 3].includes(userInfo.codeState)">
			
				<view class="form-item">
					<view class="label-area">
						<label>
							<view class="txt fade-white-font-color">申请理由</view>
						</label>
					</view>

					<view class="input-area">
						<view class="box">
							<input focus  v-model="formData.applyReason" adjust-position="false"
							    placeholder="请输入申请理由" class="custom-input"
								placeholder-style="color: rgba(255,255,255, 0.8);"
								/>
							<!-- <text class="edit"> > </text> -->
						</view>
					</view>
				</view>

				<view class="form-item">
					<view class="label-area">
						<label>
							<view class="txt fade-white-font-color">手机号</view>
						</label>
					</view>

					<view class="input-area">
						<view class="box">
							<input v-model="formData.phone" disabled placeholder="请输入正确手机号" class="custom-input"
								placeholder-style="color: rgba(255,255,255, 0.8);" />
							<!-- <text class="edit"> > </text> -->
						</view>
					</view>
				</view>


			</form>

			<div class="qr-code" v-if="userInfo.codeState === 2">
                <image :src="imgPrex + userInfo.applyCode" class="qr-image" mode="widthFix" />
			</div>
		</view>

      
		<tabarea v-if="[0, 3].includes(userInfo.codeState)">
			<view class="tap-area-slot">
				<text class="title" @click="save">保存</text>
			</view>
		</tabarea>

	</view>
</template>


<script>
	
	import * as api from '../../utils/api.js';
	import { checkPhone } from '../../utils/untils.js';
	import tabarea from '../../components/taparea.vue';
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	export default {
		components: {
			tabarea
		},
		data() {
			return {	
				userInfo: { codeState: 0, applyCode: null }, // 进来就调用一次
				imgPrex,
				formData: {					
					applyReason: '',
					phone: '',
				}
			}
		},
			
		computed: {
			
		},
		onLoad() {
		
			this.formData.phone = uni.getStorageSync('userPhone');
			this.getUserInfo();
		},
	
		methods: {
			
			async getUserInfo () {
			    const res = await api.getUserInfo();
				this.userInfo =  res.appUser;

			},
			
		
			save() {
				const that = this
				uni.showModal({
					title: '提示',
					content: '确定要申请用户码吗？',
					confirmText: '确定',
					cancelText: '取消',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击了确定');
							that.formSubmit()
						} else if (res.cancel) {
							console.log('用户点击了取消');
						}
					}
				});
			},
	
	
			back() {
				uni.navigateBack()
			},
			checkForm() {
				let errMsg = '';
				if (!this.formData.applyReason || !this.formData.applyReason.trim()) {
					errMsg = '申请理由必填'
				}
				if (this.formData.phone && checkPhone(this.formData.phone)) {
					errMsg = '手机号格式不正确'
				}
				if (errMsg) {
					this.myToast(errMsg);
				}

				return !errMsg;
			},
			async formSubmit() {
				const formData = this.formData;
				const pass = this.checkForm();
				if (!pass) return
				await api.addUserRequestDiversionCode(formData);
			
				uni.navigateBack();
				this.myToast('保存成功');

			},
			myToast(msg, icon = 'none') {
				uni.showToast({
					icon: icon,
					title: msg,
					duration: 2000
				})
			},
		},
		
	}
</script>

<style lang="scss">
	.send {
		color: white;
		padding: 40rpx 20rpx;
		align-items: center;


		.circle-btn {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background-color: #e5b44d;
			text-align: center;
			line-height: 120rpx;

			.txt {
				color: black;
				font-size: 46rpx;
			}
		}

		.sqaure-btn {
			width: 90rpx;
			height: 90rpx;
			border-radius: 8rpx;
			background-color: yellow;
			text-align: center;
			line-height: 90rpx;
			font-size: 40rpx;
			background-color: rgba(0, 0, 0, 1);

			.txt {
				color: white;
			}
		}

		.linear-gradient-back {
			background: linear-gradient(to bottom right, #f2ebce, #856925);
		}

		.linear-gradient-order {
			background: linear-gradient(to bottom right, #ede5c1, #f8ce3d);
		}

		.head {
			display: flex;
			padding: 40rpx 10rpx;
			justify-content: space-between;
			align-items: center;
			font-size: 46rpx;
		}

		.info-form {
			font-size: 30rpx;
			padding: 40rpx 10rpx;
			border-radius: 10rpx;
			background-color: rgba(0, 0, 0, 0.3);

			.form-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;
                font-size: 46rpx;
				.avatar {
					width: 90rpx;
					height: 90rpx;
					border-radius: 10rpx;
					color: white;
				}

				.edit {
					display: inline-block;
					margin-left: 10rpx;
				}

				.label-area {
					.txt {					
						width: 6em;
						display: inline-block;
					}

				}

				.input-area {
					flex: 1;
					margin-right: 1em;

					.box {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						.custom-input {
							height: 42px;
							line-height: 42rpx;
							font-size: 42rpx;
							text-align: right;
						}
					}
				}
			}

			.qr-code {
			   text-align: center;
			   .qr-image {
				  width: 450rpx;
				  height: 450rpx;
			   }  
		   }
		}

		.tap-area {
			margin: 80rpx 16rpx;

			.tap-area-slot {
				.title {
					font-size: 60rpx;
					letter-spacing: 20rpx;
					color: white;
				}
			}
		}


	}
</style>